<template>
    <div>
        <table>
            <tr>
                <td>姓名</td>
                <td>
                    <input type="text" v-model="info.userName"/>
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>
                    <input type="text" v-model="info.userAge"/>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="text" v-model="info.useSex"/>
                </td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td>
                    <input type="text" v-model="info.usePhone" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="添加" @click="Adds" /> 
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';
let info=reactive({
    userName:'',
    userAge:'',
    useSex:'',
    usePhone:''
})
const Adds=()=>{
    alert("userName:"+info.userName+"userAge"+info.userAge+"useSex"+useSex+"usePhone"+usePhone)
}
</script>

<style scoped>

</style>